<style type="text/css">
    .spectable td,.spectable th {border:1px solid #ccc; vertical-align: middle;text-align:center;}
    .spectable th { font-weight: bold;}
    .spectableinput { text-align: center;}
    .f {border-color: #b94a48;-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);}
    .table.table-bordered tr th,.table.table-bordered tr td{overflow:hidden; text-overflow:ellipsis;}
</style>
<script type="text/javascript" src="resource/js/lib/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="resource/js/lib/jquery-ui-1.10.3.min.js"></script>
<div class="tab-pane" id="tab_options">
    <div class="panel panel-default">
        <div class="panel-heading">
            规格设置
        </div>
        <div class="panel-body">
            <!--<div class="form-group">-->
                <!--<label class="col-xs-12 col-sm-3 col-md-2 control-label"><span class="require"> 启用规格</span></label>-->

                <!--<div class="col-sm-9 col-xs-12">-->
                    <!--<label class="checkbox-inline"><input type="checkbox" name="is_options" value="1" {if $item['is_options']== 1}checked{/if} onclick="$('#options').toggle();"> 启用</label>-->
                    <!--<br>-->
                    <!--<div id="options" {if $item['is_options']==1}style="display:block"{/if}>-->
                    <!--<div class="tpl">-->
                        <!--{if !empty($item['options'])}-->
                        <!--{loop $item['options'] $row}-->
                        <!--<div class="input-group">-->
                            <!--<input type="hidden" name="options[id][]" value="{$row['id']}">-->
                            <!--<span class="input-group-addon">规格名称</span>-->
                            <!--<input type="text" name="options[name][]" value="{$row['name']}" class="form-control"-->
                                   <!--placeholder="规格名称">-->
                            <!--<span class="input-group-addon">价格</span>-->
                            <!--<input type="text" name="options[price][]" value="{$row['price']}" class="form-control"-->
                                   <!--placeholder="价格">-->
                            <!--<span class="input-group-addon">库存</span>-->
                            <!--<input type="text" name="options[total][]" value="{$row['total']}" class="form-control"-->
                                   <!--placeholder="库存">-->
                            <!--<span class="input-group-addon"><a href="javascript:;" class="delOptions"><i-->
                                    <!--class="fa fa-times"></i></a></span>-->
                        <!--</div>-->
                        <!--{/loop}-->
                        <!--{else}-->
                        <!--<div class="input-group">-->
                            <!--<input type="hidden" name="options[id][]" value="">-->
                            <!--<span class="input-group-addon">规格名称</span>-->
                            <!--<input type="text" name="options[name][]" class="form-control" placeholder="规格名称">-->
                            <!--<span class="input-group-addon">价格</span>-->
                            <!--<input type="text" name="options[price][]" class="form-control" placeholder="价格">-->
                            <!--<span class="input-group-addon">库存</span>-->
                            <!--<input type="text" name="options[total][]" class="form-control" placeholder="库存">-->
                            <!--<span class="input-group-addon"><a href="javascript:;" class="delOptions"><i-->
                                    <!--class="fa fa-times"></i></a></span>-->
                        <!--</div>-->
                        <!--{/if}-->
                    <!--</div>-->
                    <!--<a href="javascript:;" class="addOptions"><i class="fa fa-plus-circle"></i> 添加规格</a>-->
                    <!--<span class="help-block">最多可添加5个规格. -1为库存无限制</span>-->
                <!--</div>-->
            <!--</div>-->
            <!--</div>-->
            <div class="form-group">
                <label class="checkbox-inline col-xs-12 col-sm-2 col-md-2 control-label">
                    <input type="checkbox" id="hasoption" value="1" name="hasoption" {if $item['hasoption']==1}checked{/if} />启用商品规格
                </label>
                <div class="col-sm-9 col-xs-12">
                    <span class="help-block">启用商品规格后，商品的价格及库存以商品规格为准,库存设置为0则不显示,-1为不限制</span>
                </div>
            </div>
            <div id='tboption' style='{if $item['hasoption']!=1}display:none{/if}'>
            <div class="alert alert-info">
                1. 拖动规格可调整规格显示顺序, 更改规格及规格项后请点击下方的【刷新规格项目表】来更新数据。<br/>
                2. 每一种规格代表不同型号，例如颜色为一种规格，尺寸为一种规格，如果设置多规格，手机用户必须每一种规格都选择一个规格项，才能添加购物车或购买。
            </div>
            <div id='specs'>
                {loop $allspecs $spec}
                {php include $this->template('spec')}
                {/loop}
            </div>
            <table class="table">
                <tr>
                    <td>
                        <h4><a href="javascript:;" class='btn btn-primary' id='add-spec' onclick="addSpec()" style="margin-top:10px;margin-bottom:10px;"title="添加规格"><i class='fa fa-plus'></i> 添加规格</a>
                            <a href="javascript:;" onclick="calc()" title="刷新规格项目表" class="btn btn-primary"><i class="fa fa-refresh"></i> 刷新规格项目表</a></h4>
                    </td>
                </tr>
            </table>
            <div class="panel-body table-responsive" id="options" style="padding:0;">
                {$html}
            </div>
        </div>
        <script language="javascript">
            $(function(){
                $('#specs').sortable({
                    stop: function(){
                        window.optionchanged = true;
                    }
                });
                $('.spec_item_items').sortable(
                        {
                            handle:'.fa-arrows',
                            stop: function(){
                                window.optionchanged = true;
                            }
                        }
                );
                $("#hasoption").click(function(){
                    var obj = $(this);
                    if (obj.get(0).checked){
                        $("#tboption").show();
                    }else{
                        $("#tboption").hide();
                    }
                });
            })
            function addSpec(){
                alert('debug');
                $("#add-spec").html("正在处理...").attr("disabled", "true").toggleClass("btn-primary");
                var url = "{php echo $this->createWebUrl('spec')}";
                $.ajax({
                    "url": url,
                    success:function(data){
                        $("#add-spec").html('<i class="fa fa-plus"></i> 添加规格').removeAttr("disabled").toggleClass("btn-primary"); ;
                        $('#specs').append(data);
                        var len = $(".add-specitem").length -1;
                        $(".add-specitem:eq(" +len+ ")").focus();
                        window.optionchanged = true;
                    }
                });
            }
            function removeSpec(specid){
                if (confirm('确认要删除此规格?')){
                    $("#spec_" + specid).remove();
                    window.optionchanged = true;
                }
            }
            function addSpecItem(specid){
                $("#add-specitem-" + specid).html("正在处理...").attr("disabled", "true");
                var url = "{php echo$this->createWebUrl('specitem')}" + "&specid=" + specid;
                $.ajax({
                    "url": url,
                    success:function(data){
                        $("#add-specitem-" + specid).html('<i class="fa fa-plus"></i> 添加规格项').removeAttr("disabled");
                        $('#spec_item_' + specid).append(data);
                        var len = $("#spec_" + specid + " .spec_item_title").length -1;
                        $("#spec_" + specid + " .spec_item_title:eq(" +len+ ")").focus();
                        window.optionchanged = true;
                    }
                });
            }
            function removeSpecItem(obj){
                $(obj).parent().parent().parent().remove();
            }
            function calc(){

                window.optionchanged = false;
                var html = '<table class="table table-bordered table-condensed"><thead><tr class="active">';
                var specs = [];
                $(".spec_item").each(function(i){
                    var _this = $(this);

                    var spec = {
                        id: _this.find(".spec_id").val(),
                        title: _this.find(".spec_title").val()
                    };

                    var items = [];
                    _this.find(".spec_item_item").each(function(){
                        var __this = $(this);
                        var item = {
                            id: __this.find(".spec_item_id").val(),
                            title: __this.find(".spec_item_title").val(),
                            show:__this.find(".spec_item_show").get(0).checked?"1":"0"
                        }
                        items.push(item);
                    });
                    spec.items = items;
                    specs.push(spec);
                });
                specs.sort(function(x,y){
                    if (x.items.length > y.items.length){
                        return 1;
                    }
                    if (x.items.length < y.items.length) {
                        return -1;
                    }
                });

                var len = specs.length;
                var newlen = 1; //多少种组合
                var h = new Array(len); //显示表格二维数组
                var rowspans = new Array(len); //每个列的rowspan
                for(var i=0;i<len;i++){
                    //表头
                    html+="<th style='width:80px;'>" + specs[i].title + "</th>";

                    //计算多种组合
                    var itemlen = specs[i].items.length;
                    if(itemlen<=0) { itemlen = 1 };
                    newlen*=itemlen;

                    //初始化 二维数组
                    h[i] = new Array(newlen);
                    for(var j=0;j<newlen;j++){
                        h[i][j] = new Array();
                    }
                    //计算rowspan
                    var l = specs[i].items.length;
                    rowspans[i] = 1;
                    for(j=i+1;j<len;j++){
                        rowspans[i]*= specs[j].items.length;
                    }
                }

                html += '<th class="info" style="width:130px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">库存</div><div class="input-group"><input type="text" class="form-control option_stock_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_stock\');"></a></span></div></div></th>';
                html += '<th class="success" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">销售价格</div><div class="input-group"><input type="text" class="form-control option_marketprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_marketprice\');"></a></span></div></div></th>';
                html+='<th class="warning" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">市场价格</div><div class="input-group"><input type="text" class="form-control option_productprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_productprice\');"></a></span></div></div></th>';
                html+='<th class="danger" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">成本价格</div><div class="input-group"><input type="text" class="form-control option_costprice_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_costprice\');"></a></span></div></div></th>';
                html+='<th class="info" style="width:150px;"><div class=""><div style="padding-bottom:10px;text-align:center;font-size:16px;">重量（克）</div><div class="input-group"><input type="text" class="form-control option_weight_all"VALUE=""/><span class="input-group-addon"><a href="javascript:;" class="fa fa-hand-o-down" title="批量设置" onclick="setCol(\'option_weight\');"></a></span></div></div></th>';
                html+='</tr></thead>';

                for(var m=0;m<len;m++){
                    var k = 0,kid = 0,n=0;
                    for(var j=0;j<newlen;j++){
                        var rowspan = rowspans[m]; //9
                        if( j % rowspan==0){
                            h[m][j]={title: specs[m].items[kid].title, html: "<td rowspan='" +rowspan + "'>"+ specs[m].items[kid].title+"</td>\r\n",id: specs[m].items[kid].id};
                            //	k++; if(k>specs[m].items.length-1) { k=0; }
                        }
                        else{
                            h[m][j]={title:specs[m].items[kid].title, html: "",id: specs[m].items[kid].id};
                        }
                        n++;
                        if(n==rowspan){
                            kid++; if(kid>specs[m].items.length-1) { kid=0; }
                            n=0;
                        }
                    }
                }

                var hh = "";
                for(var i=0;i<newlen;i++){
                    hh+="<tr>";
                    var ids = [];
                    var titles = [];
                    for(var j=0;j<len;j++){
                        hh+=h[j][i].html; //每一行的每个规格项列
                        ids.push( h[j][i].id);
                        titles.push( h[j][i].title);
                    }
                    ids =ids.join('_');
                    titles= titles.join('+');

                    var val ={ id : "",title:titles, stock : "",costprice : "",productprice : "",marketprice : "",weight:"" };
                    if( $(".option_id_" + ids).length>0){
                        val ={
                            id : $(".option_id_" + ids+":eq(0)").val(),
                            title: titles,
                            stock : $(".option_stock_" + ids+":eq(0)").val(),
                            costprice : $(".option_costprice_" + ids+":eq(0)").val(),
                            productprice : $(".option_productprice_" + ids+":eq(0)").val(),
                            marketprice : $(".option_marketprice_" + ids +":eq(0)").val(),
                            weight : $(".option_weight_" + ids+":eq(0)").val()
                        }
                    }
                    hh += '<td class="info">'
                    hh += '<input name="option_stock_' + ids +'[]"type="text" class="form-control option_stock option_stock_' + ids +'" value="' +(val.stock=='undefined'?'':val.stock )+'"/></td>';
                    hh += '<input name="option_id_' + ids+'[]"type="hidden" class="form-control option_id option_id_' + ids +'" value="' +(val.id=='undefined'?'':val.id )+'"/>';
                    hh += '<input name="option_ids[]"type="hidden" class="form-control option_ids option_ids_' + ids +'" value="' + ids +'"/>';
                    hh += '<input name="option_title_' + ids +'[]"type="hidden" class="form-control option_title option_title_' + ids +'" value="' +(val.title=='undefined'?'':val.title )+'"/></td>';
                    hh += '</td>';
                    hh += '<td class="success"><input name="option_marketprice_' + ids+'[]" type="text" class="form-control option_marketprice option_marketprice_' + ids +'" value="' +(val.marketprice=='undefined'?'':val.marketprice )+'"/></td>';
                    hh += '<td class="warning"><input name="option_productprice_' + ids+'[]" type="text" class="form-control option_productprice option_productprice_' + ids +'" " value="' +(val.productprice=='undefined'?'':val.productprice )+'"/></td>';
                    hh += '<td class="danger"><input name="option_costprice_' +ids+'[]" type="text" class="form-control option_costprice option_costprice_' + ids +'" " value="' +(val.costprice=='undefined'?'':val.costprice )+'"/></td>';
                    hh += '<td class="info"><input name="option_weight_' + ids +'[]" type="text" class="form-control option_weight option_weight_' + ids +'" " value="' +(val.weight=='undefined'?'':val.weight )+'"/></td>';
                    hh += "</tr>";
                }
                html+=hh;
                html+="</table>";
                $("#options").html(html);
            }
            function setCol(cls){
                $("."+cls).val( $("."+cls+"_all").val());
            }
            function showItem(obj){
                var show = $(obj).get(0).checked?"1":"0";
                $(obj).next().val(show);
            }
            function nofind(){
                var img=event.srcElement;
                img.src="./resource/image/module-nopic-small.jpg";
                img.onerror=null;
            }

        </script>

        </div>
    </div>
</div>
